﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Pagination 分页表格</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />

    
    <script src="../../scripts/boot.js" type="text/javascript"></script>

    <script src="js/PageSelection.js" type="text/javascript"></script>
    
    <style>
    
    </style>
        
</head>
<body >
    <h1>PageSelection 跨页选择表格</h1>      

    <div style="padding-bottom:5px;">
        
        <input type="button" value="获取选择" onclick="getSelectedAll()"/>
        <input type="button" value="取消选择" onclick="clearSelectAll()"/>
        
        
    </div>
<div id="datagrid1" class="mini-datagrid" style="width:800px;height:300px;" 
    url="../data/AjaxService.jsp?method=SearchEmployees"  idField="id" allowResize="true"    
    multiSelect="true"
>
    <div property="columns">
        <div type="indexcolumn" ></div>
        <div type="checkcolumn" ></div>
        <div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号</div>    
        <div field="name" width="120" headerAlign="center" allowSort="true" showCellTip="false">姓名</div>                            
        <div field="gender" width="100" renderer="onGenderRenderer" align="center" headerAlign="center">性别</div>
        <div field="salary" numberFormat="¥#,0.00" align="right" width="100" allowSort="true">薪资</div>                                
        <div field="age" width="100" allowSort="true" decimalPlaces="2" dataType="float">年龄</div>
        <div field="createtime" width="100" headerAlign="center" dataType="date" _dateFormat="yyyy-MM-dd HH:mm" allowSort="true">创建日期</div>                
    </div>
</div>   

    <div class="description">
        <h3>Description</h3>
        <ol>
            <li>使用PageSelection扩展组件，可以实现表格跨页多选。</li>
        </ol>
    </div>

    <script type="text/javascript">

        mini.parse();


        var grid = mini.get("datagrid1");

        grid.load();

        var pageSelection = new PageSelection(grid, {
            selectionchange: function () {
                //选择改变事件
            }
        });


        function getSelectedAll() {
            var rows = pageSelection.getSelection();
            alert(rows.length);
        }

        function clearSelectAll() {
            pageSelection.clearSelection();            
        }



    </script>

    <div class="description">
        <h3>Description</h3>
        
    </div>


  

</body>
</html>